<template>
  <div class="us" @wheel="pageUpOrDown($event)">
      <!-- 背景随滚轮变化 -->
    <div
      class="grid-bg"
      :style="`background-size:100% ${grid_img_size}px`"
    ></div>
    <!-- 头部大图 -->
    <div class="banner1">
      <div class="banner1_img">
        <!-- <img src="./imgs/6-764x299px.png" alt="" class="banner1_img1"/>
        <img src="./imgs/关于我们主图.jpg" alt="" class="banner1_img0">
        <img src="./imgs/7-531x201px.png" alt="" class="banner1_img2"/> -->
        <img src="../../assets/images/b8a2ecb7a66b47ba20cb48272df9d5e.png" alt="" style="width:100%">
      </div>
    </div>
    <!-- 正品保证 -->
    <div class="bos">
      <div>
        <img src="../../assets/images/4-173x281px-1zheng.png" alt="" />
      </div>
      <div>
        <img src="../../assets/images/4-173x281px-2pin.png" alt="" />
      </div>
      <div>
        <img src="../../assets/images/4-173x281px-3shun.png" alt="" />
      </div>
      <div>
        <img src="../../assets/images/4-173x281px-4bao.png" alt="" />
      </div>
    </div>
    <!-- 放心买二手机 -->
    <div class="banner2">
      <img src="./imgs/9-661x218px.png" alt="" />
    </div>
    <!-- 优质货源，专业质检。。。 -->
    <div class="desc">
      <div class="desc-item">
        <img src="./imgs/8-103x106px-1.png" alt="" />
        <div>
          爱泡饭商城所售二手商品均来源于合法正规渠道，保证行货，包含但不限于以旧换新，
国内专业回收机构等，机器使用时间短，电池循环次数少，外观成色好，从源头保证机器质量。
        </div>
      </div>
      <div class="desc-item">
        <img src="./imgs/8-103x106px-2.png" alt="" />
        <div>
          爱泡饭商品都是经过质检工程师的深度检测才可以上架销售的，从外观到性能一共需要70项检测，严格把控产品质量。
        </div>
      </div>
      <div class="desc-item">
        <img src="./imgs/8-103x106px-3.png" alt="" />
        <div>
          爱泡饭商城所有商品都是精挑细选，只出售9成新以上的机型，每台机器都贴有专属防拆标，杜绝伪造和拆改，虽是二手机，但却有新机的体验。
        </div>
      </div>

      <div class="desc-item">
        <img src="./imgs/8-103x106px-4.png" alt="" />
        <div>
          您在爱泡饭商城购买的每台机器均可享受保修服务：7天无理由退换货、180天保修、顺丰包邮等。
        </div>
      </div>
    </div>
    <!-- <div class="banner3">
<img src="./imgs/title02.86953be.png" alt="">

    </div> -->
    <!-- 轮播图 -->
    <!-- <div class="carousel">
     <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="item in swiper" :key="item">
      <h3 class="medium">
          <img :src="item" alt="">
      </h3>
    </el-carousel-item>
  </el-carousel>
 </div> -->
    <!-- 历程 -->
    <!-- <div>
     
     <div>
          <h1 style="font-size:120px"><em>2018</em></h1>
     </div>

 </div> -->
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      swiper: [
        "http://localhost:8080/img/slider01.9021b1b.04608a71.png",
        "http://localhost:8080/img/slider02.8486aa9.e954e718.png",
        "http://localhost:8080/img/slider03.d5d780b.9a9ade43.png",
      ],
      grid_img_size:980,
      flag:true
    };
  },
  methods: {
      //背景随滚轮变化
    pageUpOrDown(e){
       
      if(this.flag){
        this.flag=false
 if (e.wheelDeltaY >0) {
         this.grid_img_size=this.grid_img_size<980?this.grid_img_size+10:980
      }else{
         this.grid_img_size=this.grid_img_size>560?this.grid_img_size-20:560
      }
      setTimeout(() => {
        this.flag=true  
      }, 0.5);
      }
    },
  },
};
</script>

<style scoped>
.us {
  margin-top:15%;
  text-align: center;
}
.grid-bg {
  display: block;
  position: fixed;
  top: 70px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url(../../assets/images/weixintupian_20220430200328.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: -10;
  transition: background-size 0.5s linear;
  /* background-color: rgb(202, 214, 214); */
}
.banner1 {
  width: 100%;
  margin-bottom: 5%;
  position: relative;
  /* margin: 10px auto;
  background-repeat: no-repeat;
  background-size: 100%; */
}
.banner1_img{
  width:60%;
  margin: 0 auto;
  position: relative;
}
.banner1_img0{
  width: 100%;
}
.banner1_img1{
  position: absolute;
  width: 60%;
  top: -10%;
  left: -20%;

}
.banner1_img2{
  position: absolute;
  width: 60%;
  top: 60%;
  right: -20%;

}

.bos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.bos div img{
  max-width:50% ;
}
.bos div {
  /* margin: 80px; */
  width: 20%;
text-align: center;
}
.banner2 img{
width: 60%;
}
.desc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.desc-item {
  display: flex;
  width: 60%;
  margin: 30px auto;
  align-items: center;
  justify-content: center;
}
.desc-item img{
  width: 10%;
  
  margin-top: -15px;
}
.desc-item div {
  height: 100%;
  width: 70%;
  border: solid black 2px;
  font-size: 20px;
  padding: 20px;
  text-align: left;
  line-height: 30px;
  margin-left: 30px;
  position: relative;
  background-color: #ffffff;
}
.desc-item div::before {
  content: "";
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, rgb(195, 226, 231),rgb( 37, 138, 155));
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: -1;
}
.carousel {
  width: 60%;
  margin: 40px auto;
}
@media screen and (max-width: 1255px) {
   .banner1_img{
     width: 80%;
   }
  .bos div {
    width: 50%;
  }
  .banner2_img{
    width: 80%;
  }
  .desc-item{
    width: 80%;
  }
  .desc-item img{
    width: 20%;
  }
  .desc-item div{
    width: 80%;
    font-size: 14px;
  }
  .us {
    margin-top: 30%;
  }
}
</style>